<template id="IndexHeader">
  <div
    class="IndexHeader"
    :style="{ backgroundImage: 'url(' + headerBackground + ')' }"
    @click="reset($event)"
  >
    <el-row>
      <div class="leftPath">
        <div
          v-for="(item, index) in leftPathList"
          :key="index"
          :class="{ leftActive: isActive == item.dialog }"
          @click.stop="openDialog(item.dialog, item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="rightPath">
        <div
          v-for="(item, index) in rightPathList"
          :key="index"
          :class="{ rightActive: isActive == item.dialog && item.isClicked }"
          @click.stop="openDialog(item.dialog, item)"
        >
          {{ item.name }}
        </div>
      </div>
    </el-row>
    <div class="dialogs">
      <warning-dialog
        @close="closeWarningDialog"
        :isShow="warningDialogIsShow"
      />
      <vehicle-dialog
        @close="closeVehicleDialog"
        :isShow="vehicleDialogIsShow"
      />
      <person-dialog @close="closePersonDialog" :isShow="personDialogIsShow" />
      <public-dialog @close="closePublicDialog" :isShow="publicDialogIsShow" />
      <monitor-dialog
        @close="closeMonitorDialog"
        :isShow="monitorDialogIsShow"
      />
      <environment-dialog
        @close="closeEnvironmentDialog"
        :isShow="environmentDialogIsShow"
      />
    </div>
    <!--公共弹窗-->
    <div
      class="pub_win animate__animated"
      :style="{
        visibility: !winOff && wintitle == '告警管理' ? 'visible' : 'hidden',
      }"
      :class="
        !winOff && wintitle == '告警管理'
          ? 'animate__fadeInLeft'
          : 'animate__fadeOut'
      "
    >
      <FOURCONCOR />
      <i class="icon close" @click="setShowOffStatus(true, 0)"></i>
      <PaddingCom :title="wintitle">
        <div>
          <ALERAMCONTROL />
        </div>
      </PaddingCom>
    </div>
    <div
      class="pub_win animate__animated"
      :style="{
        visibility: !winOff && wintitle == '车辆管理' ? 'visible' : 'hidden',
      }"
      :class="
        !winOff && wintitle == '车辆管理'
          ? 'animate__fadeInLeft'
          : 'animate__fadeOut'
      "
    >
      <FOURCONCOR />
      <i class="icon close" @click="setShowOffStatus(true, 0)"></i>
      <PaddingCom :title="wintitle">
        <div>
          <vehiclemanage />
        </div>
      </PaddingCom>
    </div>
    <div
      class="pub_win animate__animated"
      :style="{
        visibility: !winOff && wintitle == '人员管理' ? 'visible' : 'hidden',
      }"
      :class="
        !winOff && wintitle == '人员管理'
          ? 'animate__fadeInLeft'
          : 'animate__fadeOut'
      "
    >
      <FOURCONCOR />
      <i class="icon close" @click="setShowOffStatus(true, 0)"></i>
      <PaddingCom :title="wintitle">
        <div>
          <personmanage />
        </div>
      </PaddingCom>
    </div>
    <div
      class="pub_win1 animate__animated"
      :style="{
        visibility:
          !showOffRight && wintitle1 == '园区环境' ? 'visible' : 'hidden',
      }"
      :class="
        !showOffRight && wintitle1 == '园区环境'
          ? 'animate__fadeInRight'
          : 'animate__fadeOut'
      "
    >
      <FOURCONCOR />
      <i class="icon close" @click="setShowOffStatus(true, 1)"></i>
      <PaddingCom :title="wintitle1">
        <div>
          <ENVIRONMENT />
        </div>
      </PaddingCom>
    </div>

    <div
      class="pub_win1 animate__animated"
      :style="{
        visibility:
          !showOffRight && wintitle1 == '智慧安监' ? 'visible' : 'hidden',
      }"
      :class="
        !showOffRight && wintitle1 == '智慧安监'
          ? 'animate__fadeInRight'
          : 'animate__fadeOut'
      "
    >
      <FOURCONCOR />
      <i class="icon close" @click="setShowOffStatus(true, 1)"></i>
      <PaddingCom :title="wintitle1">
        <div>
          <monitorManage />
        </div>
      </PaddingCom>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { mapState, mapMutations, mapActions } from "vuex";
import { getCurrentDate } from "utils/tools";
import WarningDialog from "./components/warningDialog/WarningDialog.vue";
import VehicleDialog from "./components/vehicleDialog/VehicleDialog.vue";
import PersonDialog from "./components/personDialog/PersonDialog.vue";
import PublicDialog from "./components/publicDialog/PublicDialog.vue";
import MonitorDialog from "./components/monitorDialog/MonitorDialog.vue";
import EnvironmentDialog from "./components/environmentDialog/EnvironmentDialog.vue";
import vehiclemanage from "components/vehiclemanage/vehicleManage";
import personmanage from "components/personmanage/personManage";
import PaddingCom from "components/paddingCom";
import FOURCONCOR from "components/fourCorner";
import ALERAMCONTROL from "components/winAlarmControl";
import ENVIRONMENT from "components/environment";
import monitorManage from "components/monitorManage/MonitorManage.vue";
import Bus from "@/utils/bus";
import { selectMonitorByIds } from "@/api/selectBlock";
export default {
  name: "IndexHeader",
  components: {
    WarningDialog,
    VehicleDialog,
    PersonDialog,
    PublicDialog,
    MonitorDialog,
    EnvironmentDialog,
    vehiclemanage,
    personmanage,
    PaddingCom,
    FOURCONCOR,
    ALERAMCONTROL,
    ENVIRONMENT,
    monitorManage,
  },
  // 定义属性
  data() {
    return {
      warningDialogIsShow: false,
      vehicleDialogIsShow: false,
      personDialogIsShow: false,
      publicDialogIsShow: false,
      monitorDialogIsShow: false,
      environmentDialogIsShow: false,
      timer: "", //定时器
      date: new Date(),
      headerBackground: require("@/assets/images/indexHeader/headerBackground.png"), //头部背景
      buttonLeft: require("@/assets/images/indexHeader/buttonLeft.png"), //左按钮
      buttonLeftHover: require("@/assets/images/indexHeader/buttonLeftHover.png"),
      buttonRight: require("@/assets/images/indexHeader/buttonRight.png"), //右按钮
      buttonRightHover: require("@/assets/images/indexHeader/buttonRightHover.png"),
      isActive: "", //选中状态
      leftPathList: [
        { name: "告警管理", dialog: "warningDialog", isClicked: true },
        { name: "车辆管理", dialog: "vehicleDialog", isClicked: true },
        { name: "人员管理", dialog: "personDialog", isClicked: true },
      ],
      rightPathList: [
        { name: "公用工程", dialog: "publicDialog", isClicked: false },
        {
          name: "智慧安监",
          dialog: "monitorDialog",
          isClicked: true,
          url: "http://218.92.104.98:10014/seeyon/main.do?method=main&loginPortal=1&portalId=-7779029842361826066",
        },
        {
          name: "园区环境",
          dialog: "environmentDialog",
          isClicked: true,
          url: "http://218.92.31.102:8423/a/iphb/bigscreen/tobigscreenindex",
        },
      ],
      wintitle: "",
      wintitle1: "",
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState({
      winOff: (state) => state.winconcrol.showOff,
      showOffRight: (state) => state.winconcrol.showOffRight,
    }),
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    ...mapMutations(["setShowOff", "setShowOffRight"]),
    setShowOffStatus(t, n) {
      // this.setShowOffRight(true);

      // this.setShowOff(true);
      if (n) {
        this.wintitle1 = "";
      } else {
        this.wintitle = "";
      }
    },
    async openDialog(name, item) {
      this.isActive = name;
      if (name == "warningDialog") {
        this.wintitle = "告警管理";
        this.setShowOff(false);
      } else if (name == "vehicleDialog") {
        this.wintitle = "车辆管理";
        this.setShowOff(false);
      } else if (name == "personDialog") {
        this.wintitle = "人员管理";
        this.setShowOff(false);
      } else if (name == "publicDialog") {
        // this.setShowOff(true);
        // this.publicDialogIsShow = true;
        // //console.log(this.isActive, "this.isActive");
        this.rightPathList[0].isClicked = !this.rightPathList[0].isClicked;
        if (item.isClicked) {
          let res = await selectMonitorByIds({ ids: "37" }); //37
          if (this.$iscode(res)) {
            Bus.$emit("openPublicMonitor", res);
          }
        } else {
          Bus.$emit("closePublicMonitor");
        }
      } else if (name == "monitorDialog") {
        // this.setShowOff(true);
        // this.monitorDialogIsShow = true;
        //  window.open(item.url);
        this.wintitle1 = "智慧安监";
        this.setShowOffRight(false);
      } else if (name == "environmentDialog") {
        // this.setShowOff(true);
        // this.environmentDialogIsShow = true;
        // window.open(item.url);

        this.wintitle1 = "园区环境";

        this.setShowOffRight(false);
      }
    },
    //关闭告警管理弹窗
    closeWarningDialog(paylod) {
      this.warningDialogIsShow = paylod;
    },
    //关闭车辆管理弹窗
    closeVehicleDialog(paylod) {
      this.vehicleDialogIsShow = paylod;
    },
    //关闭人员管理弹窗
    closePersonDialog(paylod) {
      this.personDialogIsShow = paylod;
    },
    //关闭公共管廊弹窗
    closePublicDialog(paylod) {
      this.publicDialogIsShow = paylod;
    },
    //关闭智慧安监弹窗
    closeMonitorDialog(paylod) {
      this.monitorDialogIsShow = paylod;
    },
    //关闭园区环境弹窗
    closeEnvironmentDialog(paylod) {
      this.environmentDialogIsShow = paylod;
    },
    //重置页面else if (

    reset(e) {
      var that = this;
      if (e.target.className == "el-row") {
        Bus.$emit("resetMap");

        that.setShowOff(true);
        that.setShowOffRight(true);
        this.isActive = "";
      }
    },
    dynamicTime() {
      this.timer = setInterval(() => {
        this.date = getCurrentDate();
      }, 1000);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.dynamicTime();
      Bus.$on("clickPublicMonitor", (payload) => {
      this.isActive = "publicDialog";
      this.rightPathList[0].isClicked = true;
    });
    Bus.$on("canclePublicMonitor", (payload) => {
      this.rightPathList[0].isClicked = false;
    });
    Bus.$on("resetActive", (payload) => {
      this.isActive = "";
    });
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.IndexHeader {
  height: 3.49vw;
  width: 100%;
  background-size: 100% 100%;
  font-size: 1vw;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0vh;
  color: #ffffff;
  cursor: pointer;
  .el-row {
    overflow: hidden;
    width: 100%;
    height: 100%;
    .leftPath {
      float: left;
      display: flex;
      margin-left: 1.74vw;
      margin-top: 1.06vw;
      .leftActive {
        background-image: url(../../../../assets/images/indexHeader/buttonLeftHover.png);
      }
    }
    .leftPath div {
      user-select: none;
      width: 7.55vw;
      height: 1.88vw;
      background-size: 100% 100%;
      text-align: center;
      line-height: 1.88vw;
      margin-right: 0.73vw;
      cursor: pointer;
      background-image: url(../../../../assets/images/indexHeader/buttonLeft.png);
    }
    .leftPath div:hover {
      background-image: url(../../../../assets/images/indexHeader/buttonLeftHover.png);
    }
    .rightPath {
      float: right;
      display: flex;
      justify-content: flex-end;
      margin-right: 1.74vw;
      margin-top: 1.06vw;
      .rightActive {
        background-image: url(../../../../assets/images/indexHeader/buttonRightHover.png);
      }
    }
    .rightPath div {
      user-select: none;
      width: 7.55vw;
      height: 1.88vw;
      background-size: 100% 100%;
      text-align: center;
      line-height: 1.88vw;
      margin-left: 0.73vw;
      cursor: pointer;
      background-image: url(../../../../assets/images/indexHeader/buttonRight.png);
    }
    .rightPath div:hover {
      background-image: url(../../../../assets/images/indexHeader/buttonRightHover.png);
    }
  }
}
.pub_win {
  position: absolute;
  z-index: 99;
  width: 20vw;
  top: 4vw;
  left: 0.7vw;
  bottom: 0.76vw;
  padding: 0.78vw 0.78vw;
  box-sizing: border-box;
  background: rgba(11, 58, 113, 0.9);
  overflow: hidden;
}
.pub_win1 {
  position: absolute;
  z-index: 99;
  width: 20vw;
  top: 4vw;
  right: 0.7vw;
  bottom: 0.76vw;
  padding: 0.78vw 0.78vw;
  box-sizing: border-box;
  background: rgba(11, 58, 113, 0.9);
  overflow: hidden;
}
.icon1213 {
  position: absolute;
  right: 0.2vw;
  top: 0vw;
  z-index: 999;
  padding: 10px 10px;
  cursor: pointer;
}
.close {
  width: 0.5vw;
  height: 0.5vw;
  display: block;
  position: absolute;
  right: 0.5vw;
  top: 0.5vw;
  padding: 2px 2px;
  z-index: 999;
  background: url();
  background-size: 100% 100%;
}
</style>
